<template>
    <div class="card">
        <div class="card-header">
            <div>主标题</div>
            <div>副标题</div>
        </div>
        <div v-if="content" class="card-content">
            {{ content }}
        </div>
    </div>
</template>
<script setup lang="ts">
type Props = {
    content?: string
}

defineProps<Props>()
</script>

<style scoped lang="less">
@border: #ccc;
.card {
    border: 1px solid;
    &:hover {
        box-shadow: 0 0 20px @border; //放在上面的效果
    }
    &-header {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid @border;
    }
    &-content {
        padding: 10px;
    }
}
</style>